<template>
    <el-main>
        <div style="border-bottom: 1px solid rgb(204, 204, 204);">
            <h3>保养经验</h3>
            <h4 style="margin:15px 0">保养经验列表</h4>
        </div>
        <div style="margin-top: 15px">
            <el-button type="success" @click="add()" round>新增</el-button>
            <el-button type="danger" :disabled="this.multipleSelection.length===0" @click="delMaintenanceExperience" round>
                删除
            </el-button>
            <el-button type="primary"
                       :disabled="this.multipleSelection.length===0||this.multipleSelection.length>1"
                       @click="upd"
                       round>编辑
            </el-button>
            <el-button :disabled="this.multipleSelection.length===0 " @click="start()" type="primary" round>启用
            </el-button>
            <el-button :disabled="this.multipleSelection.length===0" @click="stop()" type="primary" round>停用
            </el-button>
            <div style="margin-left: 1200px;margin-top: -30px">
                <el-input placeholder="请输入保养经验编号" size="medium" v-model="experienceCoding" class="input-with-select"
                          style=" width: 400px;">
                    <el-button slot="append" icon="el-icon-search" @click="selBySpare"></el-button>
                </el-input>
                <i class="el-icon-menu" style="margin-left: 3px;margin-top: 3px;height: 30px;width: 30px;color: #C7CDD9"
                   @click="showSpare=true"></i>
            </div>


        </div>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column prop="experienceId" label="序号">
            </el-table-column>
            <el-table-column prop="experienceCoding" label="保养经验编码">
            </el-table-column>
            <el-table-column prop="experienceName" label="保养经验名称"></el-table-column>
            <el-table-column prop="associatedApparatus" label="设备名称"></el-table-column>
            <el-table-column prop="equipmentCoding" label="设备编号"></el-table-column>
            <el-table-column prop="equipmentType" label="设备类型"></el-table-column>
            <el-table-column prop="levelState" label="状态">
                <template slot-scope="scope">
                    {{ scope.row.experienceState === 1 ? '开启' : '关闭' }}
                </template>
            </el-table-column>
            <el-table-column prop="maintenanceRequirement" label="保养要求"></el-table-column>
            <el-table-column prop="experienceComment" label="备注">
            </el-table-column>
            <el-table-column prop="operator" label="操作人">
            </el-table-column>
            <el-table-column prop="updateTime" label="操作时间">
            </el-table-column>
        </el-table>
        <!-- 分页功能-->
        <el-pagination
                :current-page.sync="MaintenanceExperience.page"
                :page-size="MaintenanceExperience.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                :total="total"
                background
                layout="total, sizes ,prev, pager, next, jumper"
                style="padding: 30px 0; text-align: center"
                @current-change="selMaintenanceExperience"
                @size-change="handleSizeChanges"
        />

        <div>
            <!--  新增弹框  -->
            <el-drawer
                    :title="names"
                    :before-close="cancelForm"
                    :visible.sync="dialog"
                    direction="rtl"
                    custom-class="demo-drawer"
                    ref="drawer"
            >
                <div class="demo-drawer__content">
                    <el-form ref="form" :rules="rules" :model="form">
                        <el-form-item label="保养经验编号:" prop="location" style="margin-left: 80px">
                            <el-input disabled size="medium" placeholder="系统自动生成" style="width: 300px"
                                      v-model="form.experienceCoding"></el-input>
                        </el-form-item>
                        <el-form-item label="保养级别名称:" prop="location" style="margin-left: 80px">
                            <el-input size="medium" style="width: 300px" v-model="form.levelName"></el-input>
                        </el-form-item>

                        <el-form-item label="状态:" prop="location" style="margin-left: 140px">
                            <el-radio v-model="form.levelState" :label=1>启动</el-radio>
                            <el-radio v-model="form.levelState" :label=2>停用</el-radio>
                        </el-form-item>
                        <el-form-item label="备注:" prop="remark" style="margin-left: 140px">
                            <el-input style="width: 300px" type="textarea" v-model="form.levelComment"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="demo-drawer__footer" style="margin:50px 200px">
                        <el-button class="my-button" @click="cancelForm">取 消</el-button>
                        <el-button class="my-button" type="primary" @click="save(isEdit)" :loading="loading">
                            {{ loading ? '提交中 ...' : '确 定' }}
                        </el-button>
                    </div>
                </div>
            </el-drawer>

        </div>


        <!--弹出层模糊查信息-->
        <div v-if="showSpare"
             style="width: 700px;
             height: 270px;
             background: white;
             position: relative;
             left: 920px;
             top:-230px;
             z-index: 900;
             border: 1px solid #F4F4F4;
             border-radius: 4px">
            <el-form ref="form" :model="MaintenanceExperience" label-width="100px">
                <el-form-item label="保养经验编码" style="margin-top: 20px">
                    <el-input v-model="MaintenanceExperience.experienceCoding" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item label="保养经验名称">
                    <el-input v-model="MaintenanceExperience.experienceName" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item label="设备编码">
                    <el-input v-model="MaintenanceExperience.equipmentCoding" style="width: 180px"></el-input>
                </el-form-item>

                <div style="margin-left: 320px;position: relative;top: -140px">
                    <el-form-item label="设备名称">
                        <el-input v-model="MaintenanceExperience.associatedApparatus" style="width: 180px"></el-input>
                    </el-form-item>
                    <el-form-item label="设备类型">
                        <el-cascader
                            value-key="id"
                            v-model="form.deviceType"
                            :options="deviceTypes"
                            :props="propes"
                            change-on-select
                        ></el-cascader>

                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="MaintenanceExperience.experienceState" placeholder="请选择活动区域">
                            <el-option label="启动" value=1></el-option>
                            <el-option label="停用" value=2></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="操作人">
                    </el-form-item>
                </div>
            </el-form>
            <div style="width: 100%;height: 50px;border-top: 1px solid #F4F4F4;margin-top: -70px">
                <el-button @click="showSpare =  false">关闭</el-button>
                <el-button @click="empty()" style="margin-top: 10px;margin-left: 20px">清空</el-button>
                <div style="margin-left: 590px;margin-top: -28px">
                    <el-button type="success" @click="selBySpare">查询</el-button>
                </div>
            </div>
        </div>
    </el-main>
</template>

<script>
export default {
    name: "Devicetype",
    data() {

        return {
            tableData: [],
            multipleSelection: [],//多选框选择数据
            //树形设备类型数据
            deviceTypes: [],
            propes: {
                value: 'id',
                label: 'typeName',
                children: 'children'
            },
            showSpare: false,
            //模糊查数据
            experienceCoding: '',
            //模糊查信息
            MaintenanceExperience: {
                page: 1,
                pageSize: 10,
                experienceCoding: null,//保养经验编码
                experienceName: null,//保养经验名称
                experienceState: null,//状态
                equipmentType: null,//设备类型
                equipmentCoding:null,//设备编码
                associatedApparatus:null,//设备名称

            },
            //分页数据
            total: 0,
            names: '',
            dialog: false, //抽屉弹窗开关
            loading: false,
            timer: null,//表单动画所需属性
            isEdit: true,//判断是新增还是修改，true是修改，false为新增

            form: {//新增数据
                levelCoding: '', //保养级别编号
                levelName: '',//保养级别名称
                levelState: 0, //状态
                levelComment: '',//备注
                levelOperator: '张三'//操作人

            },

            rules: {//定义添加验证表单规则
                locationName: [
                    {required: true, message: '存放位置', trigger: 'blur'},
                    {min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'}
                ],
                state: [
                    {required: true, message: '请选择状态', trigger: 'blur'},
                ],

            },
        }
    },
    methods: {

        //启动按钮
        start() {
            // 定义一个空数组用于存储id
            var ids = this.multipleSelection.map(obj => obj.id);
            this.request.post("device/place-for-storage/startUsing", ids)
                .then(res => {
                    if (res.code === '200') {
                        this.startOpen2() // 启动成功通知
                        this.selAllStorage()//调用全查
                    } else {
                        this.startOpen1()//启动失败通知
                    }
                })
        },
        //停用按钮
        stop() {
            // 定义一个空数组用于存储id
            var ids = this.multipleSelection.map(obj => obj.id);
            this.request.post("device/place-for-storage/outService", ids)
                .then(res => {
                    if (res.code === '200') {
                        this.stopOpen2() // 停用成功通知
                        this.selAllStorage()//调用全查
                    } else {
                        this.stopOpen1()//停用失败通知
                    }
                })
        },



        //编辑保养项目
        updateMaintenanceExperience() {
            this.request.post("/maintenance/maintenance-level/updateMaintenanceExperience", this.form)
                .then(res => {
                    console.log(res)
                    if (res.code === '200') {
                        this.dialog = false // 关闭弹窗
                        this.xiugaiOpen1() // 编辑成功通知
                        this.selMaintenanceExperience()//调用全查
                    } else {
                        this.xiugaiOpen4() // 编辑失败通知
                        this.dialog = false // 关闭弹窗
                    }
                })
        },
        //新增保养项目
        insMaintenanceExperience() {
            this.request.post("maintenance/maintenance-level/insMaintenanceExperience", this.form)
                .then(res => {
                    console.log(res)
                    if (res.code === '200') {
                        this.dialog = false // 关闭弹窗
                        this.tianjiaOpen1() // 添加成功通知
                        this.selMaintenanceExperience()//调用全查
                    } else {
                        this.tianjiaOpen4() // 添加失败通知
                        this.dialog = false // 关闭弹窗
                    }
                })
        },
        // 编辑成功通知
        xiugaiOpen1() {
            this.$notify({
                title: '成功',
                message: '编辑成功',
                type: 'success'
            });
        },
        // 编辑失败通知
        xiugaiOpen2() {
            this.$notify.error({
                title: '错误',
                message: '编辑失败'
            })
        },
        // 添加成功通知
        tianjiaOpen1() {
            this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success'
            });
        },
        // 添加失败通知
        tianjiaOpen4() {
            this.$notify.error({
                title: '错误',
                message: '添加失败'
            })
        },

        //点击新增
        add() {
            //跳转新增页面
            this.$router.push('/AddMaintenanceExperiencel')
        },


        //点击编辑
        upd() {
            this.dialog = true
            this.isEdit = true
            this.names = "编辑"
            this.mod()
        },
//          新增弹窗取消
        cancelForm() {
            this.loading = false;
            this.dialog = false;
            clearTimeout(this.timer);
        },
        //提交表单时判断是编辑还是新增
        save(val) {
            if (val) {
                //编辑
                this.updateMaintenanceExperience()
            } else {
                //新增

            }
            this.selMaintenanceExperience()
        },
        //修改信息
        mod() {
            this.form = this.multipleSelection[0]
            console.log(this.form)
        },

        //批量删除
        delMaintenanceExperience() {
            console.log(this.multipleSelection)
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //获取删除对象id

                var ids = this.multipleSelection.map(obj => obj.levelId);
                console.log(ids)
                this.request.post("maintenance/maintenance-level/delMaintenanceExperience", ids
                ).then(res => {
                    if (res.code == '200') {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'

                        });
                        this.selMaintenanceExperience()
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        //模糊查按钮
        selBySpare() {
            this.selMaintenanceExperience()
        },
        //清空
        empty() {
            this.MaintenanceExperience.levelCoding = null;
            this.MaintenanceExperience.levelName = null
            this.MaintenanceExperience.levelState = null
            this.MaintenanceExperience.operator = null
            this.MaintenanceExperience.updateTime = null

        },


        //分页模糊全查类型信息
        selMaintenanceExperience() {
            if (this.experienceCoding == '') {
                this.MaintenanceExperience.experienceCoding = null
                this.request.post("maintenance/maintenance-experience/selMaintenanceExperience", this.MaintenanceExperience).then(res => {
                    this.tableData = res.data.content
                    this.total = res.data.total

                    console.log(this.tableData)
                    console.log(res)
                })
            } else {
                this.MaintenanceExperience.experienceCoding = this.experienceCoding
                this.request.post("maintenance/maintenance-experience/selMaintenanceExperience", this.MaintenanceExperience).then(res => {
                    this.tableData = res.data.content
                    this.total = res.data.total
                })
            }

        },

        //分页跳转数据
        handleSizeChanges(pageSize) {
            debugger
            this.MaintenanceExperience.pagesize = pageSize;
            console.log(this.MaintenanceExperience.pagesize)
            this.selMaintenanceExperience();
        },
        //多选框
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    },
    //打开页面默认执行
    created() {
        this.selMaintenanceExperience()
    }
}
</script>

<style scoped>
.el-main {
    padding: 0;
}
</style>
